import React, { Component } from 'react';
import { Button, Form, Input, message } from 'antd';
import { LOGIN_OTHER } from '../../method/data.config.js';
import GVerify from '../../method/GVerify.jsx';
import MD5 from '../../method/md5.js';
import RequestLogin from '../../method/requestWrapped.jsx';
import { connect } from 'react-redux';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import * as actions from '../../../../pages/App/store/action.js'
class login_other extends Component {
      render() {
            const form = LOGIN_OTHER.form.from;
            const formItem = LOGIN_OTHER.form.formItem;
            const Keys = Object.keys(formItem);
            const method = {
                  username: <Input
                        onChange={this.onChangeAccount}
                        prefix={<UserOutlined />}
                        placeholder="请输入用户名" />,
                  password: <Input.Password
                        onChange={this.onChangePassword}
                        prefix={<LockOutlined />}
                        placeholder="请输入密码" />,
                  validate: <GVerify
                        onChange={this.onChangeValidate}
                        parent={this.props.children}
                        validate={this.props.reg} />,
                  submit: <Button
                        type="primary"
                        htmlType="submit"

                        style={{
                              width: "100%",
                              padding: "12px 22px",
                              backgroundColor: "#235fc5",
                              border: 0,
                              borderRadius: "4px",
                              fontSize: "1.1rem",
                              height: "50px"
                        }}>登录</Button>
            };
            return (
                  <Form
                        {...form}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                  >
                        {Keys.map((item, index) => {
                              return (
                                    <Form.Item
                                    style={{marginBottom:'30px'}}
                                          key={index}
                                          {...formItem[item]}
                                    >
                                          {method[item]}
                                    </Form.Item>
                              )
                        })}
                  </Form>
            );
      };
      // 获取验证码
      componentDidMount() { this.props.children() }
      //  点击确定验证成功提交表单
      onFinish = values => {
            let { reg } = this.props;
            console.log("验证码", reg)
            let obj = {
                  api: "/api/server/web/rest/user/login",
                  cmd: "login",
                  request: values,
            };
            if (values.validate === reg) {
                  this.props.login(obj);
                  return;
            } else {
                  message.error("验证码错误", 1.5)
            }
      };
      onFinishFailed = errorInfo => {
            message.error("输入的信息不符合规范", 1.5);
      }
};
const mapStateToProps = state => {
      return {
            reg: state.login.validateString,
            isLogin: state.login.isLogin
      }
}
const mapDispatchToProps = dispatch => ({
      login: (values) => {
            dispatch(actions.login(values))
      }

})
export default RequestLogin(connect(mapStateToProps, mapDispatchToProps)(login_other));